<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="page-title">我的</text>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-profile-card" :class="{ 'logged-in': isLoggedIn }">
			<view class="user-info">
				<view class="avatar" :class="{ 'logged-in': isLoggedIn }">
					<image v-if="isLoggedIn && userInfo.avatarUrl" :src="userInfo.avatarUrl" mode="aspectFill" class="avatar-image"></image>
					<text v-else>👤</text>
				</view>
				<view class="user-details">
					<view class="username" v-if="!isLoggedIn">点击登录</view>
					<view class="username" v-else>{{ userInfo.username }}</view>
					<view class="phone" v-if="!isLoggedIn">未登录状态</view>
					<view class="phone" v-else>{{ userInfo.phone }}</view>
					<view class="user-tags" v-if="isLoggedIn">
						<view class="tag verified" v-if="!isGuestMode">✓ 已认证</view>
						<view class="tag guest" v-if="isGuestMode">👤 游客模式</view>
						<view class="tag level">LV.{{ userInfo.level }}</view>
					</view>
					<view class="login-prompt" v-else>
						<text class="prompt-text">登录后享受更多功能</text>
					</view>
				</view>
			</view>
			<view class="action-btn" @click="handleUserAction">
				<text class="action-icon" v-if="!isLoggedIn">→</text>
				<text class="action-icon" v-else>↪</text>
				<text class="action-text" v-if="!isLoggedIn">登录</text>
				<text class="action-text" v-else-if="isGuestMode">退出游客</text>
				<text class="action-text" v-else>退出</text>
			</view>
		</view>
		
		<!-- 等级进度条 -->
		<view class="level-progress" v-if="isLoggedIn">
			<view class="progress-label">等级进度</view>
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: levelProgress + '%' }"></view>
			</view>
			<view class="progress-text">距离下级还需 {{ nextLevelPoints }} 点</view>
		</view>
		
		<!-- 环保数据概览 -->
		<view class="data-overview">
			<view class="data-card carbon-card" @click="viewCarbonDetail" :class="{ 'login-required': !isLoggedIn }">
				<view class="card-icon">🔗</view>
				<view class="card-value">{{ isLoggedIn ? userData.carbonValue : '-' }}</view>
				<view class="card-label">碳环保值</view>
			</view>
			<view class="data-card recycle-card" @click="viewRecycleDetail" :class="{ 'login-required': !isLoggedIn }">
				<view class="card-icon">📈</view>
				<view class="card-value">{{ isLoggedIn ? userData.recycleCount : '-' }}</view>
				<view class="card-label">回收次数</view>
			</view>
			<view class="data-card exchange-card" @click="viewexchangeRecordsDetail" :class="{ 'login-required': !isLoggedIn }">
				<view class="card-icon">🔄</view>
				<view class="card-value">{{ isLoggedIn ? userData.exchangeRecords : '-' }}</view>
				<view class="card-label">兑换记录</view>
			</view>
		</view>
		
		<!-- 快速操作 -->
		<view class="quick-actions">
			<view class="action-card tasks-card" @click="viewTasks" :class="{ 'login-required': !isLoggedIn }">
				<view class="action-icon">🎯</view>
				<view class="action-title">我的任务</view>
				<view class="action-desc">查看每日任务进度</view>
			</view>
			<view class="action-card report-card" @click="viewDataReport" :class="{ 'login-required': !isLoggedIn }">
				<view class="action-icon">📊</view>
				<view class="action-title">数据报告</view>
				<view class="action-desc">查看详细环保数据</view>
			</view>
		</view>
		
		<!-- 成就徽章 -->
		<view class="achievements-section">
			<view class="section-title">
				<text class="badge-icon">🏆</text>
				成就徽章
			</view>
			<view v-if="isLoggedIn" class="achievements-grid">
				<view class="achievement-item" v-for="(achievement, index) in achievements" :key="index" :class="{ 'unlocked': achievement.unlocked }">
					<view class="achievement-badge" :class="{ 'locked': !achievement.unlocked }">
						{{ achievement.unlocked ? '🏆' : '🔒' }}
					</view>
					<view class="achievement-title">{{ achievement.title }}</view>
					<view class="achievement-condition">{{ achievement.condition }}</view>
				</view>
			</view>
			<view v-else class="login-prompt-achievement" @click="viewAchievements">
				<text class="prompt-text-achievement">请登录后查看历史成就</text>
			</view>
		</view>
		
		<!-- 设置菜单 -->
		<view class="settings-menu">
			<view class="menu-item" v-for="(menu, index) in menuItems" :key="index" @click="handleMenuClick(menu)">
				<view class="menu-icon">{{ menu.icon }}</view>
				<view class="menu-text">{{ menu.text }}</view>
				<view class="menu-right">
					<text class="menu-desc" :class="{ 'unread': menu.unread }" v-if="menu.desc">{{ menu.desc }}</text>
					<view class="menu-arrow"></view>
				</view>
			</view>
		</view>
		
		<!-- 实名认证 -->
		<view class="verification-section">
			<view class="verification-item" @click="viewVerification">
				<view class="verification-icon">📄</view>
				<view class="verification-text">实名认证</view>
				<view class="verification-status">
					<text class="status-text">已认证</text>
					<view class="status-arrow"></view>
				</view>
			</view>
		</view>
		
		<!-- 登录弹窗 -->
		<view class="login-modal userInfo_tank_bg" v-if="showLoginModal" @click="closeLoginModal">
			<view class="login-content userInfo_tank transfromjoin" @click.stop>
				<view class="login-header tank_title">
						<text class="login-title">申请获取您的头像、昵称</text>
						<view class="close-btn" @click="closeLoginModal">×</view>
					</view>
				
				<view class="login-body">
					<view class="auth-form">
						<view class="form-row tank_content">
							<text class="label">头像：</text>
							<view class="avatar-cell">
								<!-- 头像显示区域 -->
								<view class="avatar-display">
									<image 
										v-if="tempUserInfo.avatarUrl" 
										:src="tempUserInfo.avatarUrl" 
										mode="aspectFill" 
										class="avatar-thumb" 
										@error="onAvatarError"
										@load="onAvatarLoad"
									/>
									<view v-else class="avatar-placeholder">
										<text class="placeholder-icon">📷</text>
									</view>
								</view>
								<!-- 微信小程序官方获取头像方式：open-type=chooseAvatar -->
								<!-- #ifdef MP-WEIXIN -->
								<button class="avatar_button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
								<!-- #endif -->
								<!-- #ifndef MP-WEIXIN -->
								<button class="avatar_button" @click="chooseAvatarFromAlbum">选择头像</button>
								<!-- #endif -->
							</view>
						</view>
						<view class="divider"></view>
						<view class="form-row tank_content">
							<text class="label">昵称：</text>
							<input class="nickname-input flat" v-model="tempUserInfo.nickName" placeholder="请输入昵称" @focus="showWxNicknameTip" maxlength="20" />
						</view>
					</view>
					
					<view class="confirm_button btn-row">
						<view>
							<button class="reject-btn" @click="closeLoginModal">拒绝</button>
						</view>
						<view>
							<!-- 微信小程序：通过 agreePrivacyAuthorization 触发官方隐私弹窗 -->
							<!-- #ifdef MP-WEIXIN -->
							<button class="allow-btn" :disabled="isGettingProfile" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="onAgreePrivacy">允许</button>
							<!-- #endif -->
							<!-- #ifndef MP-WEIXIN -->
							<button class="allow-btn" :disabled="isGettingProfile" @click="confirmLogin">允许</button>
							<!-- #endif -->
						</view>
					</view>
					
					<!-- 游客登录选项 -->
					<view class="guest-login-section">
						<view class="guest-divider">
							<text class="divider-text">或</text>
						</view>
						<button class="guest-login-btn" @click="guestLogin">
							<text class="guest-icon">👤</text>
							<text class="guest-text">游客模式登录</text>
						</button>
						<view class="guest-tip">
							<text class="tip-text">游客模式可体验基础功能，部分功能需要完整登录</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onLoad() {
		// 页面加载时恢复用户登录状态
		this.restoreUserInfo();
	},
	data() {
		return {
			isLoggedIn: false, // 登录状态
			isGuestMode: false, // 游客模式状态
			showLoginModal: false, // 显示登录弹窗
			isGettingProfile: false, // 防抖：获取微信资料中
			userInfo: {
				username: '环保用户',
				phone: '138****8888',
				level: 3,
				avatarUrl: '', // 用户头像
				nickName: '' // 用户昵称
			},
			tempUserInfo: {
				avatarUrl: '', // 临时头像
				nickName: '' // 临时昵称
			},
			levelProgress: 65, // 等级进度百分比
			nextLevelPoints: 55, // 距离下级还需的点数
			userData: {
				carbonValue: 245,
				recycleCount: 127,
				exchangeRecords: 3
			},
			achievements: [
				{
					title: '环保新手',
					condition: '完成首次回收',
					unlocked: true
				},
				{
					title: '绿色达人',
					condition: '累计回收50次',
					unlocked: true
				},
				{
					title: '环保专家',
					condition: '累计回收100次',
					unlocked: true
				},
				{
					title: '碳减排先锋',
					condition: '减少碳排放5kg',
					unlocked: false
				}
			]
		}
	},
	computed: {
		// 动态生成菜单项
		menuItems() {
			return [
				{
					icon: '📍',
					text: '收货地址',
					desc: '管理收货地址',
					action: 'address'
				},
				{
					icon: '🔔',
					text: '消息通知',
					desc: this.isLoggedIn ? '3条未读' : '',
					unread: this.isLoggedIn,
					action: 'notification'
				},
				{
					icon: '🌙',
					text: '深色模式',
					desc: '已关闭',
					action: 'darkMode'
				},
				{
					icon: '🛡️',
					text: '隐私设置',
					action: 'privacy'
				},
				{
					icon: '⚙️',
					text: '系统设置',
					action: 'system'
				},
				{
					icon: '❓',
					text: '帮助中心',
					action: 'help'
				}
			]
		}
	},
	methods: {
		// 处理用户操作（登录/退出）
		handleUserAction() {
			if (this.isLoggedIn) {
				this.logout();
			} else {
				this.login();
			}
		},
		
		// 登录
		login() {
			// 先进行隐私授权（仅微信小程序）
			// #ifdef MP-WEIXIN
			wx.getPrivacySetting({
				success: (res) => {
					const openLoginModal = () => {
						this.showLoginModal = true;
						this.tempUserInfo = { avatarUrl: '', nickName: '' };
					};
					if (res.needAuthorization) {
						wx.requirePrivacyAuthorize({
							success: () => { openLoginModal(); },
							fail: () => { openLoginModal(); }
						});
					} else {
						openLoginModal();
					}
				}
			});
			// #endif
			// #ifndef MP-WEIXIN
			this.showLoginModal = true;
			this.tempUserInfo = { avatarUrl: '', nickName: '' };
			// #endif
		},
		
		// 关闭登录弹窗
		closeLoginModal() {
			this.showLoginModal = false;
		},
		
		// 选择头像
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.tempUserInfo.avatarUrl = res.tempFilePaths[0];
				},
				fail: (err) => {
					uni.showToast({
						title: '选择头像失败',
						icon: 'none'
					});
				}
			});
		},

		// 头像选择由系统弹窗 chooseAvatar 处理，不再自定义操作单


		// 昵称输入框聚焦提示
		showWxNicknameTip() {
			uni.showToast({ 
				title: '请输入您的昵称', 
				icon: 'none', 
				position: 'top', 
				duration: 1500 
			});
		},

		// 确认登录（不再使用废弃的getUserProfile）
		confirmLogin() {
			const name = (this.tempUserInfo.nickName || '').trim();
			if (!name) {
				uni.showToast({
					title: '请输入昵称',
					icon: 'none'
				});
				return;
			}
			this.tempUserInfo.nickName = name;
			
			// 先获取微信登录code
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					if (loginRes.code) {
						this.doLogin(loginRes.code);
					} else {
						uni.showToast({
							title: '获取授权码失败',
							icon: 'none'
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '微信登录失败',
						icon: 'none'
					});
				}
			});
		},

		// 隐私授权按钮回调（微信官方）
		onAgreePrivacy() {
			// 用户同意隐私协议后，直接确认登录
			this.confirmLogin();
		},

		// 游客登录
		guestLogin() {
			uni.showModal({
				title: '游客模式',
				content: '游客模式可体验基础功能，但无法保存数据和个人信息。确定以游客身份进入吗？',
				confirmText: '确定',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.doGuestLogin();
					}
				}
			});
		},

		// 执行游客登录
		doGuestLogin() {
			uni.showLoading({
				title: '进入游客模式...'
			});
			
			// 模拟游客登录过程
			setTimeout(() => {
				uni.hideLoading();
				
				// 设置游客模式状态
				this.isGuestMode = true;
				this.isLoggedIn = true; // 游客模式也算登录状态
				
				// 设置游客用户信息
				this.userInfo = {
					username: '游客用户',
					phone: '游客模式',
					level: 1,
					avatarUrl: '',
					nickName: '游客'
				};
				
				// 保存游客状态到本地存储
				uni.setStorageSync('userInfo', this.userInfo);
				uni.setStorageSync('isLoggedIn', true);
				uni.setStorageSync('isGuestMode', true);
				
				// 关闭登录弹窗
				this.closeLoginModal();
				
				uni.showToast({
					title: '已进入游客模式',
					icon: 'success',
					duration: 2000
				});
			}, 1000);
		},

		// 头像选择回调（微信官方 chooseAvatar）
		onChooseAvatar(e) {
			const url = (e && e.detail && e.detail.avatarUrl) || '';
			if (url) {
				console.log('选择头像成功:', url);
				// 检查文件路径是否有效
				if (url.startsWith('wxfile://') || url.startsWith('http')) {
					// 验证文件是否存在
					this.validateAvatarFile(url);
				} else {
					// 尝试下载文件到本地
					this.downloadAvatarToLocal(url);
				}
			} else {
				console.error('头像选择失败:', e);
				this.showAvatarSelectionFallback();
			}
		},

		// 验证头像文件是否存在
		validateAvatarFile(url) {
			uni.showLoading({ title: '验证头像中...' });
			
			// 先尝试获取文件信息
			uni.getFileInfo({
				filePath: url,
				success: (res) => {
					uni.hideLoading();
					if (res.size > 0) {
						// 文件存在且有效
						this.tempUserInfo.avatarUrl = url;
						uni.showToast({
							title: '头像选择成功',
							icon: 'success',
							duration: 1500
						});
					} else {
						// 文件无效，尝试备用方案
						this.showAvatarSelectionFallback();
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('头像文件验证失败:', err);
					// 文件不存在或无效，尝试备用方案
					this.showAvatarSelectionFallback();
				}
			});
		},

		// 下载头像到本地
		downloadAvatarToLocal(url) {
			uni.showLoading({ title: '处理头像中...' });
			
			uni.downloadFile({
				url: url,
				success: (res) => {
					uni.hideLoading();
					if (res.statusCode === 200) {
						// 再次验证下载的文件
						this.validateAvatarFile(res.tempFilePath);
					} else {
						this.showAvatarSelectionFallback();
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.error('头像下载失败:', err);
					this.showAvatarSelectionFallback();
				}
			});
		},

		// 头像选择失败时的备用方案
		showAvatarSelectionFallback() {
			uni.showModal({
				title: '头像选择失败',
				content: '系统头像选择失败，是否使用相册选择？',
				confirmText: '选择相册',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.chooseAvatarFromAlbum();
					}
				}
			});
		},

		// 从相册选择头像
		chooseAvatarFromAlbum() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					if (res.tempFilePaths && res.tempFilePaths.length > 0) {
						this.tempUserInfo.avatarUrl = res.tempFilePaths[0];
						uni.showToast({
							title: '头像选择成功',
							icon: 'success',
							duration: 1500
						});
					}
				},
				fail: (err) => {
					console.error('相册选择失败:', err);
					uni.showToast({
						title: '头像选择失败',
						icon: 'none'
					});
				}
			});
		},

		// 头像加载成功
		onAvatarLoad() {
			console.log('头像加载成功');
		},

		// 头像加载失败
		onAvatarError(e) {
			console.error('头像加载失败:', e);
			// 清除无效的头像URL
			this.tempUserInfo.avatarUrl = '';
			
			// 显示更友好的错误提示
			uni.showModal({
				title: '头像加载失败',
				content: '头像文件可能已损坏或不存在，请重新选择头像',
				confirmText: '重新选择',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.showAvatarSelectionFallback();
					}
				}
			});
		},

		
		// 执行登录请求
		doLogin(code) {
			uni.showLoading({
				title: '登录中...'
			});
			
			// 调用Java端登录接口
			uni.request({
				url: 'http://localhost:8080/wxmini/login',
				method: 'GET',
				data: {
					appid: 'wx35690ff5cc25560c', 
					code: code, // 自动获取的code
					nickName: this.tempUserInfo.nickName,
					avatarUrl: this.tempUserInfo.avatarUrl
				},
				success: (res) => {
					uni.hideLoading();
					
					if (res.statusCode === 200 && res.data.code === 200) {
						// 登录成功
						this.isLoggedIn = true;
						this.userInfo.nickName = this.tempUserInfo.nickName;
						this.userInfo.avatarUrl = this.tempUserInfo.avatarUrl;
						this.userInfo.username = this.tempUserInfo.nickName;
						
						// 保存用户信息到本地存储
						uni.setStorageSync('userInfo', this.userInfo);
						uni.setStorageSync('isLoggedIn', true);
						
						this.closeLoginModal();
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
					} else {
						// 登录失败
						uni.showToast({
							title: res.data.message || '登录失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
					console.error('登录请求失败:', err);
				}
			});
		},
		
		// 恢复用户信息
		restoreUserInfo() {
			try {
				const savedUserInfo = uni.getStorageSync('userInfo');
				const savedLoginStatus = uni.getStorageSync('isLoggedIn');
				const savedGuestMode = uni.getStorageSync('isGuestMode');
				
				if (savedLoginStatus && savedUserInfo && typeof savedUserInfo === 'object') {
					this.isLoggedIn = true;
					this.isGuestMode = savedGuestMode || false;
					this.userInfo = Object.assign({}, this.userInfo, savedUserInfo);
				}
			} catch (e) {
				console.error('恢复用户信息失败:', e);
			}
		},
		
		// 退出登录
		logout() {
			const title = this.isGuestMode ? '退出游客模式' : '确认退出';
			const content = this.isGuestMode ? '确定要退出游客模式吗？' : '确定要退出登录吗？';
			
			uni.showModal({
				title: title,
				content: content,
				success: (res) => {
					if (res.confirm) {
						// 清除本地存储的用户信息
						uni.removeStorageSync('userInfo');
						uni.removeStorageSync('isLoggedIn');
						uni.removeStorageSync('isGuestMode');
						
						// 重置用户信息
						this.isLoggedIn = false;
						this.isGuestMode = false;
						this.userInfo = {
							username: '环保用户',
							phone: '138****8888',
							level: 3,
							avatarUrl: '',
							nickName: ''
						};
						
						const toastTitle = this.isGuestMode ? '已退出游客模式' : '已退出登录';
						uni.showToast({
							title: toastTitle,
							icon: 'success'
						});
					}
				}
			});
		},
		
		// 查看任务
		viewTasks() {
			if (!this.isLoggedIn) {
				uni.showModal({
					title: '提示',
					content: '请先登录后查看任务',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.login();
						}
					}
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/task/task'
			});
		},
		
		// 查看数据报告
		viewDataReport() {
			if (!this.isLoggedIn) {
				uni.showModal({
					title: '提示',
					content: '请先登录后查看数据报告',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.login();
						}
					}
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/report/report'
			});
		},
		
		// 查看碳环保详情
		viewCarbonDetail() {
			if (!this.isLoggedIn) {
				uni.showModal({
					title: '提示',
					content: '请先登录后查看碳环保详情',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.login();
						}
					}
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/carbon/carbon'
			});
		},
		
		// 查看兑换记录详细
		viewexchangeRecordsDetail() {
			if (!this.isLoggedIn) {
				uni.showModal({
					title: '提示',
					content: '请先登录后查看兑换记录',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.login();
						}
					}
				});
				return;
			}
			uni.navigateTo({
				url:'/pages/exchangeRecords/exchangeRecords'
			});
		},
		// 查看回收次数
		viewRecycleDetail() {
			if (!this.isLoggedIn) {
				uni.showModal({
					title: '提示',
					content: '请先登录后查看回收次数',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.login();
						}
					}
				});
				return;
			}
			uni.navigateTo({
				url:'/pages/frequency/frequency'
			});
		},
		
		// 查看实名认证
		viewVerification() {
			uni.showToast({
				title: '实名认证详情',
				icon: 'none'
			});
		},
		
		// 查看成就徽章
		viewAchievements() {
			if (!this.isLoggedIn) {
				uni.showModal({
					title: '提示',
					content: '请先登录后查看成就徽章',
					confirmText: '去登录',
					success: (res) => {
						if (res.confirm) {
							this.login();
						}
					}
				});
				return;
			}
			// 登录后可以跳转到成就详情页面
			uni.showToast({
				title: '查看成就徽章',
				icon: 'none'
			});
		},
		
		// 处理菜单点击
		handleMenuClick(menu) {
			switch (menu.action) {
				case 'address':
					if (!this.isLoggedIn) {
						uni.showModal({
							title: '提示',
							content: '请先登录后管理收货地址',
							confirmText: '去登录',
							success: (res) => {
								if (res.confirm) {
									this.login();
								}
							}
						});
						return;
					}
					uni.navigateTo({
						url: '/pages/Shipping-address/Shipping-address'
					});
					break;
				case 'notification':
					if (!this.isLoggedIn){
						uni.showModal({
							title: '提示',
							content: '请先登录后查看消息通知',
							confirmText: '去登录',
							success: (res) => {
								if (res.confirm) {
									this.login();
								}
							}
						});
						return;
					}
					uni.navigateTo({
						url:"/pages/notification/notification"
					});
					break;
				case 'darkMode':
					uni.showToast({
						title: '切换深色模式',
						icon: 'none'
					});
					break;
				case 'privacy':
					uni.showToast({
						title: '隐私设置',
						icon: 'none'
					});
					break;
				case 'system':
					uni.showToast({
						title: '系统设置',
						icon: 'none'
					});
					break;
				case 'help':
					uni.showToast({
						title: '帮助中心',
						icon: 'none'
					});
					break;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

/* 头部标题 */
.header {
	background: linear-gradient(135deg, #4CAF50, #8BC34A);
	padding: 100rpx 40rpx 40rpx;
	text-align: center;
	
	.page-title {
		font-size: 40rpx;
		font-weight: bold;
		color: white;
	}
}

/* —— 引入你提供的授权弹窗样式 —— */
.userInfo_tank_bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999; margin: 0; padding: 0; }
.userInfo_tank { position: fixed; bottom: 0; background-color: #fff; width: 100%; border-radius: 30rpx 30rpx 0 0; padding: 30rpx; box-sizing: border-box; z-index: 999999; margin: 0; }
.transfromjoin { transition: all 0.3s; margin-bottom: 0; }
.transfromout { transition: all 0.3s; margin-bottom: -700rpx; }
.avatar_url { width: 80rpx; height: 80rpx; border-radius: 50%; }
.tank_content { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; height: 100rpx; }
.tank_content text { color: #787376; }
.tank_content input { width: 80%; text-align: right; }
.tank_title { border-bottom: 1px solid #eee; padding-bottom: 30rpx; font-weight: 700; }
.confirm_button { display: flex; margin: 50rpx 0; box-sizing: border-box; align-items: center; justify-content: center; }
.confirm_button view { display: flex; justify-content: center; align-items: center; width: 50%; }
.pos_photo { position: absolute; bottom: 0; right: -10rpx; background-color: rgba(0,0,0,0.3); border-radius: 50%; width: 40rpx; height: 40rpx; display: flex; justify-content: center; align-items: center; }
.pos_photo text { font-size: 25rpx !important; color: #fff; }
.avatar_button { padding: 0 !important; margin: 0 !important; width: 80rpx !important; height: 80rpx !important; border-radius: 50% !important; font-size: 32rpx !important; overflow: visible !important; }
.logout-btn { margin-top: 20rpx; padding: 10rpx; background-color: #e6e6e6; border: none; border-radius: 8rpx; font-size: 28rpx; color: #333; }

/* 用户信息卡片 */
.user-profile-card {
	background: linear-gradient(135deg, #A5D6A7, #E8F5E8);
	margin: 30rpx 40rpx;
	border-radius: 24rpx;
	padding: 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	box-shadow: 0 8rpx 24rpx rgba(129, 199, 132, 0.2);
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	cursor: pointer;
	
	&:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 16rpx 40rpx rgba(129, 199, 132, 0.3);
	}
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
		background: linear-gradient(90deg, #FF6F00, #FF8F00);
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	&.logged-in {
		background: linear-gradient(135deg, #66BB6A, #ffffff);
		box-shadow: 0 12rpx 32rpx rgba(102, 187, 106, 0.25);
		
		&::before {
			opacity: 1;
		}
	}
	
	.user-info {
		display: flex;
		align-items: center;
		
		.avatar {
			width: 120rpx;
			height: 120rpx;
			background: linear-gradient(135deg, #A5D6A7, #C8E6C9);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 60rpx;
			color: white;
			margin-right: 30rpx;
			box-shadow: 0 8rpx 20rpx rgba(165, 214, 167, 0.3);
			border: 4rpx solid rgba(255, 255, 255, 0.4);
			transition: all 0.3s ease;
			
			&:hover {
				transform: scale(1.05);
				box-shadow: 0 12rpx 28rpx rgba(165, 214, 167, 0.4);
			}
			
			&.logged-in {
				background: linear-gradient(135deg, #66BB6A, #81C784);
				box-shadow: 0 8rpx 20rpx rgba(102, 187, 106, 0.3);
			}
		}
		
		.user-details {
			.username {
				font-size: 36rpx;
				font-weight: bold;
				color: #2E7D32;
				margin-bottom: 10rpx;
				transition: color 0.3s ease;
				
				&.logged-in {
					color: #1a1a1a;
					text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
				}
			}
			
			.phone {
				font-size: 28rpx;
				color: #66BB6A;
				margin-bottom: 20rpx;
				font-weight: 500;
				transition: color 0.3s ease;
				
				&.logged-in {
					color: #424242;
				}
			}
			
			.user-tags {
				display: flex;
				gap: 15rpx;
				
				
				.tag {
					padding: 10rpx 18rpx;
					border-radius: 25rpx;
					font-size: 22rpx;
					font-weight: 600;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
					transition: transform 0.2s ease;
					
					&:active {
						transform: scale(0.95);
					}
					
					&.verified {
						background: linear-gradient(135deg, #66BB6A, #81C784);
						color: white;
						border: 1rpx solid #4CAF50;
					}
					
					&.level {
						background: linear-gradient(135deg, #42A5F5, #64B5F6);
						color: white;
						border: 1rpx solid #2196F3;
					}
					
					&.guest {
						background: linear-gradient(135deg, #FF9800, #FFB74D);
						color: white;
						border: 1rpx solid #F57C00;
					}
				}
			}
			
			.login-prompt {
				.prompt-text {
					font-size: 24rpx;
					color: #66BB6A;
					font-style: italic;
					opacity: 0.8;
				}
			}
		}
	}
	
	.action-btn {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 25rpx;
		color: #2E7D32;
		border: 2rpx solid #2E7D32;
		transition: all 0.3s ease;
		font-weight: 600;
		cursor: pointer;
		
		&:active {
			background: #2E7D32;
			color: white;
			transform: scale(0.95);
		}
		
		.action-icon {
			font-size: 24rpx;
			margin-right: 8rpx;
			transition: transform 0.3s ease;
		}
		
		.action-text {
			font-size: 24rpx;
		}
		
		&:hover .action-icon {
			transform: translateX(4rpx);
		}
	}
}

/* 登录状态切换动画 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.user-profile-card {
	&.logged-in .user-info {
		animation: fadeInUp 0.5s ease;
	}
	
	&:not(.logged-in) .action-btn {
		animation: pulse 2s ease-in-out infinite;
	}
}

/* 等级进度条 */
.level-progress {
	margin: 30rpx 40rpx;
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	
	.progress-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.progress-bar {
		width: 100%;
		height: 12rpx;
		background: #f0f0f0;
		border-radius: 6rpx;
		overflow: hidden;
		margin-bottom: 15rpx;
		
		.progress-fill {
			height: 100%;
			background: linear-gradient(90deg, #66BB6A, #A5D6A7);
			transition: width 0.3s ease;
		}
	}
	
	.progress-text {
		font-size: 24rpx;
		color: #666;
		text-align: right;
	}
}

/* 环保数据概览 */
.data-overview {
	margin: 30rpx 40rpx;
	display: flex;
	gap: 20rpx;
	
	.data-card {
		flex: 1;
		background: white;
		border-radius: 20rpx;
		padding: 35rpx 25rpx;
		text-align: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		cursor: pointer;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6rpx;
			background: linear-gradient(90deg, var(--card-color), var(--card-color-light));
		}
		
		&:hover {
			transform: translateY(-8rpx);
			box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
		}
		
		&:active {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		}
		
		.card-icon {
			font-size: 56rpx;
			margin-bottom: 20rpx;
			filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
			transition: transform 0.3s ease;
		}
		
		.card-value {
			font-size: 56rpx;
			font-weight: bold;
			margin-bottom: 12rpx;
			background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			transition: all 0.3s ease;
		}
		
		.card-label {
			font-size: 26rpx;
			color: #666;
			font-weight: 500;
			transition: color 0.3s ease;
		}
		
		&:hover .card-icon {
			transform: scale(1.1);
		}
		
		&:hover .card-value {
			transform: scale(1.05);
		}
		
		&:hover .card-label {
			color: var(--card-color);
		}
		
		&.carbon-card {
			--card-color: #66BB6A;
			--card-color-light: #81C784;
			
			&::before {
				background: linear-gradient(90deg, #66BB6A, #81C784);
			}
		}
		
		&.recycle-card {
			--card-color: #42A5F5;
			--card-color-light: #64B5F6;
			
			&::before {
				background: linear-gradient(90deg, #42A5F5, #64B5F6);
			}
		}
		
		&.exchange-card {
			--card-color: #AB47BC;
			--card-color-light: #BA68C8;
			
			&::before {
				background: linear-gradient(90deg, #AB47BC, #BA68C8);
			}
		}
		
		&.login-required {
			opacity: 0.7;
			position: relative;
			
			.card-value {
				color: #999 !important;
				-webkit-text-fill-color: #999 !important;
			}
			
			.card-label {
				color: #999 !important;
			}
		}
	}
}

/* 快速操作 */
.quick-actions {
	margin: 30rpx 40rpx;
	display: flex;
	gap: 20rpx;
	
	.action-card {
		flex: 1;
		background: white;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		cursor: pointer;
		
		&:hover {
			transform: translateY(-6rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		}
		
		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		}
		
		.action-icon {
			font-size: 48rpx;
			margin-bottom: 15rpx;
			text-align: center;
			transition: transform 0.3s ease;
		}
		
		.action-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
			text-align: center;
			transition: color 0.3s ease;
		}
		
		.action-desc {
			font-size: 22rpx;
			color: #666;
			text-align: center;
			transition: color 0.3s ease;
		}
		
		&:hover .action-icon {
			transform: scale(1.1);
		}
		
		&:hover .action-title {
			color: #2196F3;
		}
		
		&:hover .action-desc {
			color: #42A5F5;
		}
		
		&.tasks-card .action-icon {
			color: #42A5F5;
		}
		
		&.report-card .action-icon {
			color: #66BB6A;
		}
		
		&.login-required {
			opacity: 0.7;
			position: relative;
			
			.action-title {
				color: #999 !important;
			}
			
			.action-desc {
				color: #999 !important;
			}
		}
	}
}

/* 成就徽章 */
.achievements-section {
	margin: 30rpx 40rpx;
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		
		.badge-icon {
			margin-right: 10rpx;
			font-size: 28rpx;
			filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
		}
	}
	
	.achievements-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24rpx;
		
		.achievement-item {
			background: white;
			border-radius: 20rpx;
			padding: 35rpx 25rpx;
			text-align: center;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			position: relative;
			overflow: hidden;
			transition: all 0.3s ease;
			cursor: pointer;
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 4rpx;
				background: linear-gradient(90deg, #FFD700, #FFA500);
				opacity: 0;
				transition: opacity 0.3s ease;
			}
			
			&:hover {
				transform: translateY(-6rpx);
				box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
			}
			
			&.unlocked {
				background: linear-gradient(135deg, #FFF8E1, #FFECB3);
				border: 2rpx solid #FFB74D;
				
				&::before {
					opacity: 1;
				}
				
				&:hover {
					background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
					border-color: #FFA726;
				}
				
				.achievement-badge {
					animation: badgeGlow 2s ease-in-out infinite alternate;
				}
			}
			
			&:active {
				transform: scale(0.98);
			}
			
			.achievement-badge {
				font-size: 56rpx;
				margin-bottom: 20rpx;
				filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.15));
				transition: transform 0.3s ease;
				
				&.locked {
					opacity: 0.4;
					filter: grayscale(100%);
				}
			}
			
			.achievement-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 12rpx;
				transition: color 0.3s ease;
			}
			
			.achievement-condition {
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
				transition: color 0.3s ease;
			}
			
			&:hover .achievement-badge {
				transform: scale(1.1);
			}
			
			&:hover .achievement-title {
				color: #FF8F00;
			}
			
			&:hover .achievement-condition {
				color: #FFA726;
			}
		}
	}
	
	.login-prompt-achievement {
		text-align: center;
		padding: 80rpx 40rpx;
		background: linear-gradient(135deg, #f8f9fa, #e9ecef);
		border-radius: 20rpx;
		border: 2rpx dashed #ddd;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(45deg, transparent 30%, rgba(102, 187, 106, 0.05) 50%, transparent 70%);
			animation: shimmer 3s ease-in-out infinite;
		}
		
		.prompt-text-achievement {
			font-size: 30rpx;
			color: #666;
			font-weight: 500;
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15rpx;
			
			&::before {
				content: '🔒';
				font-size: 36rpx;
				opacity: 0.6;
			}
			
			&::after {
				content: '🔓';
				font-size: 36rpx;
				opacity: 0.6;
			}
		}
		
		&:hover {
			background: linear-gradient(135deg, #f0f2f5, #e3e6ea);
			border-color: #66BB6A;
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 24rpx rgba(102, 187, 106, 0.15);
		}
	}
}

@keyframes badgeGlow {
	from {
		filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.15));
	}
	to {
		filter: drop-shadow(0 6rpx 16rpx rgba(255, 215, 0, 0.4));
	}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* 设置菜单 */
.settings-menu {
	margin: 30rpx 40rpx;
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 35rpx 30rpx;
		border-bottom: 1rpx solid #f8f9fa;
		transition: all 0.3s ease;
		position: relative;
		cursor: pointer;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:hover {
			background: #f8f9fa;
			transform: translateX(8rpx);
		}
		
		&:active {
			background: #e9ecef;
			transform: translateX(4rpx);
		}
		
		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 4rpx;
			background: linear-gradient(135deg, #66BB6A, #81C784);
			opacity: 0;
			transition: opacity 0.3s ease;
		}
		
		&:hover::after {
			opacity: 1;
		}
		
		.menu-icon {
			font-size: 40rpx;
			margin-right: 25rpx;
			color: #666;
			filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
			transition: transform 0.3s ease;
		}
		
		.menu-text {
			flex: 1;
			font-size: 30rpx;
			color: #333;
			font-weight: 500;
			transition: color 0.3s ease;
		}
		
		.menu-right {
			display: flex;
			align-items: center;
			
			.menu-desc {
				font-size: 26rpx;
				color: #42A5F5;
				margin-right: 20rpx;
				font-weight: 500;
				transition: all 0.3s ease;
				
				&.unread {
					color: #EF5350;
					background: rgba(239, 83, 80, 0.1);
					padding: 8rpx 16rpx;
					border-radius: 12rpx;
					font-size: 24rpx;
					font-weight: 600;
					border: 1rpx solid rgba(239, 83, 80, 0.2);
				}
			}
			
			.menu-arrow {
				width: 20rpx;
				height: 20rpx;
				position: relative;
				transition: transform 0.3s ease;
				
				&::after {
					content: '>';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 26rpx;
					color: #999;
					font-weight: bold;
				}
			}
		}
		
		&:hover .menu-icon {
			transform: scale(1.1);
		}
		
		&:hover .menu-text {
			color: #66BB6A;
		}
		
		&:hover .menu-arrow {
			transform: translateX(4rpx);
		}
	}
}

/* 实名认证 */
.verification-section {
	margin: 30rpx 40rpx;
	
	.verification-item {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		cursor: pointer;
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		}
		
		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		}
		
		.verification-icon {
			font-size: 36rpx;
			margin-right: 20rpx;
			color: #666;
			transition: transform 0.3s ease;
		}
		
		.verification-text {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			transition: color 0.3s ease;
		}
		
		.verification-status {
			display: flex;
			align-items: center;
			
			.status-text {
				font-size: 24rpx;
				color: #66BB6A;
				margin-right: 15rpx;
				font-weight: 600;
				transition: color 0.3s ease;
			}
			
			.status-arrow {
				width: 20rpx;
				height: 20rpx;
				position: relative;
				transition: transform 0.3s ease;
				
				&::after {
					content: '>';
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 24rpx;
					color: #999;
					font-weight: bold;
				}
			}
		}
		
		&:hover .verification-icon {
			transform: scale(1.1);
		}
		
		&:hover .verification-text {
			color: #66BB6A;
		}
		
		&:hover .status-text {
			color: #4CAF50;
		}
		
		&:hover .status-arrow {
			transform: translateX(4rpx);
		}
			}
	}


/* 登录弹窗样式 */
.login-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	animation: fadeIn 0.3s ease;
}

.login-content {
	background: white;
	width: 100%;
	border-radius: 20rpx 20rpx 0 0;
	padding: 20rpx;
	position: relative;
	animation: slideUp 0.3s ease;
	box-shadow: 0 -6rpx 24rpx rgba(0,0,0,0.08);
}

.login-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
	
	.login-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
	}
	
	.close-btn {
		width: 52rpx;
		height: 52rpx;
		background: #f5f5f5;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
		cursor: pointer;
		transition: all 0.3s ease;
		
		&:active {
			background: #e0e0e0;
			transform: scale(0.95);
		}
	}
}

.login-body {
}
.auth-form { background: #fff; border-radius: 16rpx; overflow: hidden; }
.form-row { display: flex; align-items: center; padding: 14rpx 10rpx; }
.label { width: 110rpx; color: #666; font-size: 26rpx; padding-left: 10rpx; }
.avatar-cell { padding-right: 20rpx; position: relative; display: flex; align-items: center; justify-content: flex-end; }
.avatar-display { position: relative; width: 72rpx; height: 72rpx; }
.avatar-thumb { width: 72rpx; height: 72rpx; border-radius: 50%; background: #f5f5f5; border: 2rpx solid #eaeaea; }
.avatar-placeholder { width: 72rpx; height: 72rpx; border-radius: 50%; background: #f5f5f5; border: 2rpx dashed #ccc; display: flex; align-items: center; justify-content: center; }
.placeholder-icon { font-size: 32rpx; color: #999; }
.avatar_button { padding: 0 !important; margin: 0 !important; width: 72rpx !important; height: 72rpx !important; border-radius: 50% !important; overflow: hidden !important; position: absolute; right: 0; top: 0; background: transparent !important; border: none !important; }
.divider { height: 1rpx; background: #f3f3f3; margin: 0 8rpx; }
.nickname-input.flat { flex: 1; height: 60rpx; border: none; background: transparent; font-size: 26rpx; color: #333; }
.avatar-btns-row { display: flex; gap: 12rpx; justify-content: center; margin-top: 16rpx; }
.avatar-btn { background: #66BB6A; color: #fff; border: none; padding: 18rpx 28rpx; border-radius: 24rpx; font-size: 26rpx; }
.avatar-btn.primary { background: #07c160; }
	
	.nickname-section {
		margin-bottom: 40rpx;
		
		.input-label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			font-weight: 500;
		}
		
		.nickname-input {
			width: 100%;
			height: 80rpx;
			border: 2rpx solid #e0e0e0;
			border-radius: 16rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			background: #f9f9f9;
			transition: border-color 0.3s ease;
			
			&:focus {
				border-color: #66BB6A;
				background: white;
			}
		}
	}
	
	.login-confirm-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #66BB6A, #4CAF50);
		color: white;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 12rpx rgba(102, 187, 106, 0.3);
		}
		
		&:disabled {
			background: #ccc;
			cursor: not-allowed;
		}
	}


/* 授权底部按钮行（拒绝/允许） */
.btn-row { display: flex; justify-content: space-between; padding-top: 12rpx; }
.reject-btn, .allow-btn { width: 45%; height: 64rpx; border-radius: 12rpx; font-size: 26rpx; }
.reject-btn { background: #f6f6f6; color: #333; border: 2rpx solid #eee; }
.allow-btn { background: #07c160; color: #fff; border: none; }

/* 游客登录样式 */
.guest-login-section {
	margin-top: 30rpx;
	padding-top: 20rpx;
}

.guest-divider {
	text-align: center;
	margin-bottom: 20rpx;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}
	
	.divider-text {
		background: #fff;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #999;
		position: relative;
		z-index: 1;
	}
}

.guest-login-btn {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
	border: 2rpx solid #d0d0d0;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15rpx;
	transition: all 0.3s ease;
	
	&:active {
		background: linear-gradient(135deg, #e8e8e8, #d8d8d8);
		transform: scale(0.98);
	}
	
	.guest-icon {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.guest-text {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}
}

.guest-tip {
	text-align: center;
	
	.tip-text {
		font-size: 22rpx;
		color: #999;
		line-height: 1.4;
	}
}

/* 头像图片样式 */
.avatar-image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

/* 弹窗动画 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}
</style>